<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8' />
    <title>初识Vue</title>
   <!-- 
			几个注意点：
					1.关于组件名:
								一个单词组成：
											第一种写法(首字母小写)：school
											第二种写法(首字母大写)：School
								多个单词组成：
											第一种写法(kebab-case命名)：my-school
											第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
								备注：
										(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
										(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

					2.关于组件标签:
								第一种写法：<school></school>
								第二种写法：<school/>
								备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

					3.一个简写方式：
								const school = Vue.extend(options) 可简写为：const school = options
		-->
    <script type='text/javascript' src='../js/vue.js'></script>
</head>

<body>
    <div id='root'>
        <school></school>
        <student></student>
    </div>
    <script type='text/javascript'>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        const school = Vue.extend({//组件没有el由VUE管理
            template: `
                <div>
                   学校名称：<h2>{{school.name}}</h2>
                   学校地址：<h2>{{school.address}}</h2>
                   <button @click='showName'>name</button>
                </div>`,
            data() {
                return {
                    school: {
                        name: "123",
                        address: "456"
                    }
                }
            },
            methods: {
                showName(){
                    alert(this.school.name)
                }
            },
        })
        const student = {//组件没有el由VUE管理没有Vue.extend也可以
            template: `
                <div>
                   学生名称：<h2>{{student.name}}</h2>
                   学生年龄：<h2>{{student.age}}</h2>
                </div>`,
            data() {
                return {
                    student: {
                        name: "789",
                        age: "10"
                    }
                }
            }
        }
        //创建Vue实例
        new Vue({
            el: '#root',
            data: {
            },
            components: {
                school,
                student
            }
        })
    </script>
</body>

</html>